<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>123</title>
	<style type="text/css">
		.box {width: 100px;height: 100px;border: 1px solid red;}
		.img2 {width: 150px;height: 100px; background-color: blue }
        .img3 {width: 150px;height: 100px; background-color: blue }
	</style>
	
</head>
<body>
	<div class="box"></div>
	<div class="box"></div>
    <img src="../img/zly6.jpg" draggable="true" class="img2" /> 
	<img src="../img/zly6.jpg" draggable="true" class="img3" /> 
	

	<script type="text/javascript">
		window.onload = function () {
			function start(ev) {
				ev.dataTransfer.setData("Text", ev.target.class); //设置数据类型为（“Text”）和ID 
			}
			function stop(ev) {
				ev.preventDefault(); //阻止元素发生默认行为 
				var id = ev.dataTransfer.getData("Text"); //获取数据类型对应的ID         
                ev.target.appendChild(document.getElementsByClassName("class")[0]);
                //start(ev); 
                for(var i=0; i<2;i++){
                    start(ev);
                }
			}
			function over(ev) {
				ev.preventDefault();
			}
			var oBox = document.getElementsByClassName('box');
			var oImg = document.getElementsByClassName('img2')||document.getElementsByClassName('img3');
			oImg.ondragstart = function (ev) { //要拖动的元素触发本函数 
                //start(ev);  
                for(var i=0; i<2;i++){
                    start(ev);
                }
			}; 
			oBox.ondragover=function(ev){ //拖动过程中触发本函数 
                //over(ev); 
                for(var i=0; i<2;i++){
                     over(ev);
                }
			}; 
			oBox.ondrop=function(ev){//拖动结束时触发本函数 
               // stop(ev); 
                for(var i=0; i<2;i++){
                    stop(ev);
                }
               
            }; 
            
		};
	</script>
</body>

</html>